<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>财富管理中心</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <#include "public/css.ftl">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<#include "public/tip.ftl">
<div class="wrapper">
    <#include "public/header.ftl">
    <!-- Left side column. contains the logo and sidebar -->
    <#include "public/aside.ftl">
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Data Tables
                <small>advanced tables</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li class="active">#</li>
                <li class="active">#</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">债务列表</h3>
                        </div>
                        <div class="box-body">
                            <div id="toolbar">
                                <div class="form-inline" role="form">
                                    <a class="btn btn-app" onclick="showAddDebtModel(-1)">
                                        <i class="fa fa-plus"></i> 新增
                                    </a>
                                </div>
                            </div>
                            <table id="table" data-toggle="table" data-url="/debt/list" class=".table-responsive table text-nowrap"
                                   data-search="true" data-pagination="true" data-page-list="[5,10]" data-sort-name="id" data-show-columns="true" data-show-refresh="true"
                                   data-show-toggle="true" data-show-columns="true">
                                <#--                data-sortable 设置当前列是否可排序，默认当前显示内容排序  sortable: true -->
                                <#--                data-sort-name 设置默认排序列名-->
                                <#--                data-sort-order 设置默认排序方式 asc/desc-->

                                <#--                data-show-columns 设置是否开启显示列,默认为false-->
                                <#--                data-switchable 设置是否参与显示隐藏-->
                                <#--                data-visible 设置默认是否显示-->
                                <#--                data-height 设置table表格固定高度-->
                                <#--                data-card-view 设置table 的显示方式是否是card view-->

                                <#--                data-search 是否显示搜索框-->
                                <#--                data-show-refresh 是否像是刷新按钮,注：刷新操作会重新请求数据，并带着请求参数-->
                                <#--                data-show-toggle 是否显示面板切换按钮-->
                                <#--                data-show-columns 是否显示列控制按钮-->

                                <#--                data-search 是否显示搜索框-->
                                <#--                data-show-refresh 是否像是刷新按钮,注：刷新操作会重新请求数据，并带着请求参数-->
                                <#--                data-show-toggle 是否显示面板切换按钮-->
                                <#--                data-show-columns 是否显示列控制按钮-->

                                <thead>
                                <tr>
                                    <th data-field="name" data-align="center">债务名称</th>
                                    <th data-field="custName" data-align="center">客户姓名</th>
                                    <th data-field="everyAmount" data-formatter="yuanFormatter" data-align="right">每期金额</th>
                                    <th data-field="nextPayDate" data-align="center">下期日期</th>
                                    <th data-field="cycleType" data-formatter="cycleTypeFormatter" data-align="center">周期类型</th>
                                    <th data-field="cardCustName" data-align="center">还款卡户名</th>
                                    <th data-field="cardCode" data-align="center">还款卡号</th>
                                    <th data-field="remark">备注信息</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <#include "public/footer.ftl" >
    <div class="control-sidebar-bg"></div>
</div>
<#include "public/js.ftl" >
<#include "debt/adddebt.ftl">
<script>
    // 改变当前列数据样式
    function type(value,row,index){
        return '<span class="badge">'+value+'</span>';
    }

    function cycleTypeFormatter(value,row,index) {
        var name = "月";
        if(value === 1) {
            name = "月";
        } else if(value === 2) {
            name = "日";
        } else if(value === 2) {
            name = "周";
        } else if(value === 2) {
            name = "季";
        } else if(value === 2) {
            name = "年";
        }
        var num = row.cycleNum;
        if( row.cycleNum === 1) {
            num = "" ;
        }
        return "每" + num + name;
    }

    // 改变当前列数据字体颜色
    function color(value){
        return '<span style="color:#ff704b">'+value+'</span>';
    }
    function custUpdate(value,row,index){
        //value 当前值 row 当前行数据对象 index 当前行索引
        // alert(value+','+row+','+index);
        // return "<a href='javascript:showAddCustModel("+index+");'>" + value + "</a>"
        return "<a href='javascript:void(0)' onclick='showAddDebtModel("+index+")'>" + value + "</a>"
    }


    function yuanFormatter(value, row, index) {
        return number_format(value, 2, ".", ",");
    }
    function showAddDebtModel(index) {
        addDebtModel_init();
        addDebtModel_setValue(index) ;
        $("#addCustModel").modal("show");
    }

    function hideColumnBirth(value,row,index){
        $("#table").bootstrapTable('hideColumn', 'birth');
    }
</script>
</body>
</html>
